<template>
  <div class="virtualTable">
  2222
    <!--   show-header-overflow 会导致表头错开-->
    <vxe-table :loading="loading" border="inner" show-overflow show-header-overflow ref="xTree"
      :column-config="{ resizable: true }"
      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', expandAll: true }"
      :row-config="{ isHover: true, height: 56 }" :data="dataSource" :max-height="props.maxHeight" :scroll-y="{ gt: 20 }">
      <vxe-column v-for="(item, index) in columns" :fixed="item.fixed == 'left' ? 'left' : null" :width="item.width"
        :min-width="item.minWidth" :tree-node="item.key == 'name'" :key="index" :title="item.title"
        :field="item.dataIndex">
        <template #default="{ row, column }" v-slot="slotProps">
          <slot name="slotProps" :record="{ row, column }"></slot>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, useSlots, nextTick, watch, onMounted, } from "vue";
// type
interface dataSourceType {
  [propName: string]: any;
}
// props
const props = defineProps({
  columns: {
    type: Array as any,
    default: []
  },
  dataSource: {
    type: Array,
    default: []
  },
  maxHeight: {
    type: Number,
    default: 600
  }
});


//interface
interface DataList {
  [propName: string | number]: any;
}
//type
type tableextend = (a: Boolean, b: Object) => void;
const loading = ref(false);

//data
const slots = useSlots();
let dataSource = ref(props.dataSource);

const columns = ref(props.columns);


// watch
watch(() => props.columns, (newVal: any, oldVal: any) => {
  if (newVal !== oldVal) {
    columns.value = newVal;
  }
}, { deep: true })
watch(() => props.dataSource, (newVal, oldVal) => {

  if (newVal !== oldVal) {
    loading.value = true;
    let originData: DataList[] = [];
    loopFloat(JSON.parse(JSON.stringify(newVal)), originData, []);
    loading.value = false;
    nextTick(() => {
      dataSource.value = originData;
    })
  }

}, { deep: true })


// loop 扁平化站群、菜单数据, vxeTable只识别扁平化数据
const loopFloat = (data: dataSourceType[], list: dataSourceType[], pid: (string | number | any)[]) => {
  data.forEach((item: dataSourceType) => {
    item.parentNodes = JSON.parse(JSON.stringify(pid));
    if (item.parentId) {
      item.parentNodes.push(item.parentId);
    }
    item.childNodes = [];
    if (item.children instanceof Array && item.children.length) {
      getChildIds(item.children, item.childNodes);
    }
    let obj = {
      id: item.id,
      name: item.name,
      parentId: item.parentId,
      parentNodes: item.parentNodes,
      childNodes: item.childNodes,
    }
    list.push(obj);
    item.children && item.children.length ? loopFloat(item.children, list, JSON.parse(JSON.stringify(item.parentNodes))) : '';
  })
}
//
const getChildIds = (data: DataList[], list: (string | number)[]) => {
  data.forEach((item: DataList) => {
    list.push(item.id)
    if (item.children instanceof Array && item.children.length) {
      getChildIds(item.children, list)
    }
  })
}
//defineExpose
defineExpose({ dataSource })
</script>
<style lang="less" scoped></style>
<style lang="less">
.virtualTable {
  padding-top: 24px;
  min-height: 200px;

  .vxe-table--fixed-left-wrapper {
    height: 100% !important;
    z-index: 2;
    background: #f7f7f7;

    .vxe-table--body-wrapper.fixed-left--wrapper {
      overflow-x: auto !important;
      min-height: calc(100% - 56px);
    }
  }

  // .fixed-left--wrapper {
  //   min-width: 400px;
  // }

  .vxe-table--body {
    min-width: 1200px;
  }
}

.permissionTable {
  background-color: inherit;

  ::deep(th:nth-child(1)) {
    padding-left: 16px;
  }
}

.rotate90 {
  transform: scale(0.8) rotate(90deg) !important;
}
</style>
